<template>
	<view class="flex justify-center" @click="handle(data)"> 
		<view class="heartcart">
			<!-- 标题 -->
			<view class="margin text-xl text-black" style="font-weight: bold;">
				{{data?.title}}
			</view>
			<!-- 文字内容 -->
			<view class="margin-lr-sm text-black text-sm text-clamp-2">
				{{data?.detail.content}}
			</view>
			<!-- 淡色分隔线 -->
			<view class="divider"></view>
			<!-- 作者信息 -->
			<view class="flex justify-between">
				<view class="flex">
					<image :src="data?.authorAvatar" mode="" class="cu-avatar round margin-sm"></image>
					<!-- 作者名字及职业 -->
					<view class="margin-top-sm">
						<view class="text">{{data?.author}}</view>
						<view class="flex">
							<image src="/static/zr/jinxuan.png" mode="" class="jinxuan"></image>
							<view class="text-sm text-gray" style="margin-left: 5upx;">{{data?.authorTitle}}</view>
						</view>
						
					</view>
				</view>
				<!-- 作者标签 -->
				<view class="cu-btn sm line-mauve light margin-sm radius">
					{{data?.tag}}
				</view>
				
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import type {Article} from '@/model/Dynamics'
	import { useArticleStore } from '@/store/heartcart_details';
	
	// 从父组件传入动态卡片内容
	defineProps<{
		data?:Article;
	}>()
	
	// 跳转心岛精选详情页
	const handle = (data:Article)=>{
		// 将数据传入pinia
		const articleStore = useArticleStore();
		articleStore.setCurrentArticle(data); // 存入Store
		
		// 进行页面跳转
		uni.reLaunch({
			url:'/pages/HeartIsland/details'
		})
	}
</script>

<style lang="scss">

	.heartcart{
		height: 300upx;
		width: 95%;
		
		border-radius: 20upx;
		margin-top: 30upx;
		
		
		background-image:
		   linear-gradient(90deg, #ffffff 0%, #f0efff 100%),  /* 横向渐变 */
		   linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 100%);  /* 垂直渐变（透明度变化） */
		 
		 /* 混合模式：让两个渐变融合显示 */
		 background-blend-mode: overlay;
	}
	
	.text-clamp-2 {
	  display: -webkit-box; /* 弹性盒模型，用于配合line-clamp */
	  -webkit-box-orient: vertical; /* 垂直方向排列 */
	  -webkit-line-clamp: 2; /* 限制显示的行数为2行 */
	  overflow: hidden; /* 隐藏超出部分 */
	  text-overflow: ellipsis; /* 超出部分显示省略号 */
	  word-break: break-all; /* 解决长单词/URL导致的换行异常 */
	}
	.jinxuan{
		height: 25upx;
		width: 25upx;
	}
	/* 淡色分隔线样式 */
	.divider {
		
		width: 90%; /* 线长略短于卡片宽度，更美观 */
		margin: 10upx auto; /* 上下留白，居中显示 */
		margin-top: 10upx;
		border-top: 1px solid #eee; /* 浅灰色线条 */
	}

</style>